<template>
  <div class="pc home">
    <div class="banner">
      <banner></banner>
      <!-- <img style="width: 100%" src="@/assets/pc/home-banner.png" alt="" /> -->
      <div class="texts">
        <div class="t1">Delivering The Best Global Payments Experience</div>
        <div class="t2">
          <div>Onta Network is payments in the age of internet capital</div>
          <div>markets - bringing the speed and interoperability of crypto</div>
          <div>to payment infrastructure around the world.</div>
        </div>
        <div class="t3">
          <span>Proudly built with</span>
          <img src="@/assets/svg/banner-1.png" alt="" />
        </div>
      </div>
      <div class="texts2">
        <div class="partners">Partners</div>
        <Vue3Marquee class="icons">
          <img src="@/assets/svg/b-i-5.svg" alt="" />
          <img src="@/assets/svg/b-i-6.svg" alt="" />
          <img src="@/assets/svg/b-i-4.svg" alt="" />
          <img src="@/assets/svg/b-i-2.svg" alt="" />
          <img src="@/assets/svg/b-i-1.svg" alt="" />
          <img src="@/assets/svg/b-i-3.svg" alt="" />

          <img src="@/assets/svg/b-i-5.svg" alt="" />
          <img src="@/assets/svg/b-i-6.svg" alt="" />
          <img src="@/assets/svg/b-i-4.svg" alt="" />
          <img src="@/assets/svg/b-i-2.svg" alt="" />
          <img src="@/assets/svg/b-i-1.svg" alt="" />
          <img src="@/assets/svg/b-i-3.svg" alt="" />
        </Vue3Marquee>
      </div>
    </div>
    <!-- 第二屏 -->
    <Services />
    <!-- 第三屏 -->
    <div class="con3">
      <div class="con-title">Onta Network Metrics</div>
      <div class="con-desc">
        <div>
          Explore Onta Network and view real time transaction data in the UP Network Explorer
        </div>
      </div>
      <div class="datas" ref="targetElement">
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalTransactionNumber || 0) }}</div>
          <div class="data-desc">Total Transactions</div>
        </div>
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalMerchant || 0) }}</div>
          <div class="data-desc">Total Merchants</div>
        </div>
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalKycUser || 0) }}</div>
          <div class="data-desc">KYC’d Users</div>
        </div>
        <div class="data">
          <div class="data-num">{{ thousandSplit(homeDataNum.totalCountry || 0) }}</div>
          <div class="data-desc">Countries</div>
        </div>
      </div>
    </div>
    <!-- 第四屏 -->
    <div class="con4">
      <div class="con-title">FAQs</div>
      <div class="con-desc">
        <div>Explore commonly asked questions about Onta Network</div>
      </div>
      <div class="con-btns">
        <div
          class="btn"
          :class="{ btnActive: faqSelect == 'customers' }"
          @click="changeSelect('customers')"
        >
          For Customers
        </div>
        <div
          class="btn"
          :class="{ btnActive: faqSelect == 'merchants' }"
          @click="changeSelect('merchants')"
        >
          For Merchants
        </div>
      </div>
      <div class="faqs">
        <div class="faq" v-for="(item, index) in faqsList" :key="index">
          <div class="left">
            <div class="faq-title" :class="{ active: item.open }">
              <div>{{ item.title }}</div>
            </div>
            <div class="faq-desc" :style="{ display: item.open ? 'block' : 'none' }">
              {{ item.desc }}
            </div>
          </div>
          <div class="right" @click="openFaq(index)">
            <img v-if="item.open" class="opt" src="@/assets/svg/sub-r.svg" alt="" />
            <img v-else class="opt" src="@/assets/svg/add-r.svg" alt="" />
          </div>
        </div>
        <div class="view-all">
          <img class="view-all-icon" src="@/assets/svg/view-all.svg" alt="" />
          <div class="view-all-text">View All</div>
        </div>
      </div>
    </div>
    <!-- 第五屏 -->
    <div class="con5">
      <Experience></Experience>
    </div>
  </div>
</template>

<script>
import Banner from '@/components/Banner/index.vue'
import Services from '@/components/Services/index.vue'
import Experience from '@/components/Experience/index.vue'
import { selectOfficialWebsiteHomePageDataDto } from '@/utils/api'
import { thousandSplit } from '@/utils/index'
import { Vue3Marquee } from 'vue3-marquee'
import { getFaqs } from '@/utils/mock'
export default {
  name: 'pcHomePage',
  components: {
    Vue3Marquee,
    Banner,
    Services,
    Experience
  },
  data() {
    return {
      thousandSplit,
      faqIndex: 0,
      homeDataNum: {},
      faqSelect: 'customers',
      faqsList: getFaqs('customers')
    }
  },

  mounted() {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          // 元素进入视图后执行的操作
          console.log('元素进入视图')
          this.play() // 调用数字自增动画函数
          observer.unobserve(this.$refs.targetElement) // 停止观察元素，防止重复触发
        }
      })
    })
    observer.observe(this.$refs.targetElement) // 开始观察元素

    selectOfficialWebsiteHomePageDataDto().then((res) => {
      console.log(res)
      if (res.code === '000000') {
        this.homeDataNum = res.data
      }
    })
  },
  methods: {
    changeSelect(type) {
      this.faqSelect = type
      if (type === 'customers') {
        this.faqsList = getFaqs('customers')
      } else {
        this.faqsList = getFaqs('merchants')
      }
    },
    play() {
      // 数字自增动画
      this.$nextTick(() => {
        const numList = document.querySelectorAll('.data-num')
        numList.forEach((item) => {
          // this.animateNumber('data-num', 0, 12345678, 10)
          let num = 0
          const targetNum = parseInt(item.innerText.replace(/,/g, ''))
          const timer = setInterval(() => {
            if (num >= targetNum) {
              clearInterval(timer)
              item.innerText = targetNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            } else {
              num += Math.ceil(targetNum / 100)
              // console.log(targetNum, 'targetNum')
              // console.log(Math.ceil(targetNum / 100), 'Math.ceil(targetNum / 100)')
              item.innerText = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            }
          }, 10)
        })
      })
    },
    animateNumber(selector, start, end, duration) {
      let obj = document.getElementById(selector)
      let range = end - start
      let startTime = null
      let current = start

      function step(timestamp) {
        if (!startTime) startTime = timestamp
        let progress = timestamp - startTime
        let value = Math.min(Math.max(start, start + (progress / duration) * range), end)
        obj.innerText = Math.floor(value) // 使用Math.floor来取整，避免出现小数点
        if (progress < duration) {
          requestAnimationFrame(step)
        } else {
          obj.innerText = end // 确保最终值是精确的end值
        }
      }
      requestAnimationFrame(step)
    },

    // 使用示例
    openFaq(index) {
      this.faqsList.forEach((item, i) => {
        if (i === index) {
          item.open = !item.open
        } else {
          item.open = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('./index.less');
</style>
